<template>
  <div>
    <div class="orderHead" id="searchBar" :class="orders.length >0 && searchBarFixed == true ? 'padBottom' :''">
      <div :class="orders.length >0 && searchBarFixed == true ? 'isFixed' :''">
        <div class="widthSet">
          <p>套餐名称</p>
          <!-- <p>包含课程</p> -->
          <p>套餐价格</p>
          <p>实付金额（元）</p>
          <p>订单状态</p>
          <p>操作</p>
        </div>
      </div>
    </div>
    <div class="orderBody" :class="orders.length >0 && searchBarFixed == true ? 'marginTop' :''">
      <div v-if="!orders.length" class="orders-null">
        <span>
          <img src="../../images/meiyoudingdan.png">
        </span>
        <span class="orders-null-text">暂时没有订单信息</span>
      </div>
      <orderList :orderItem="item" @orderClose="orderCloseFn" @orderDelete="orderDeleteFn" v-for="(item, index) in orders" :key="index+'order'"
        v-if="item.orderStatus!=='9'" @reload="getOrderData"></orderList>
      <el-dialog title="提示" :visible.sync="centerDialogVisible" center>
        <span class="deteleText">确认要{{dialogType}}此订单吗</span>
        <div class="dialog-footer-wrapper">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirmFn">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  updateInfo,
  orderByUser,
  orderClose,
  orderDelete,
  instalOrderById
} from 'api/getData';
import {
  mapActions,
  mapGetters,
  mapState
} from 'vuex'
import orderList from 'basic/orderlist/index'
export default {
  data() {
    return {
      // 我的订单
      orders: [],
      centerDialogVisible: false,
      deteleOrderId: 0,
      dialogConfirmFlag: '',
      dialogType: '',
      searchBarFixed:false
    }
  },
  props: {
    orderD: Object
  },
  components: {
    orderList
  },
  computed: {
    ...mapState(['needPayBool'])
  },
  methods: {
    ...mapActions([
      'setNeedPayBool'
    ]),

    // 关闭订单
    orderCloseFn(id) {
      this.centerDialogVisible = true
      this.dialogConfirmFlag = '0'
      this.dialogType = '关闭'
      this.deteleOrderId = id
    },
    // 删除订单
    orderDeleteFn(id) {
      this.centerDialogVisible = true
      this.dialogConfirmFlag = '1'
      this.dialogType = '删除'
      this.deteleOrderId = id
    },
    // 弹窗确定时删除订单函数
    dialogConfirmFn() {
      if (this.dialogConfirmFlag === '0') { //关闭函数
        orderClose(this.deteleOrderId).then(data => {
          this.getOrderData()
          if (this.needPayBool) { // 如果为真的时候说明是从支付页面跳转过来删除未支付
            this.$router.push({
              path: 'payPage',
              query: {
                courseId: this.$route.query.courseId
              }
            })
            this.setNeedPayBool(false)
          }
        })
      } else {
        orderDelete(this.deteleOrderId).then(data => {
          this.getOrderData()
        })
      }
      this.centerDialogVisible = false
    },

    // 获取我的订单数据
    async getOrderData() {
      let loading = this.getLoading()
      let courseArr=[]
      await orderByUser(this.orderD.type, this.orderD.cluesOrStuId).then(data => {
        let resData = data.orderList,
          len = resData.length-1
        for (let j = len; j >= 0; j--) {
          // console.log(resData[j].order)
          resData[j].order.showNum = 3

          if(resData[j].order.orderStatus == 5 || resData[j].order.orderStatus == 6 || resData[j].order.orderStatus == 8){
            let data = [],
            itemStr = JSON.stringify(resData[j].order)
            // instalOrderById(resData[j].id).then(res => {
              let msg = resData[j].hirePurchaseList,
                length = msg.length
                // console.log(msg)
              for(let i = 0; i<length; i++){
                data.push(JSON.parse(itemStr))
                //超时时间
                data[i].closeDate = msg[i].closeDate;
                //当前期数
                data[i].itemIndex = i+1;
                //是否显示 超时时间
                data[i].isShowOverdue = false;
                if(msg[i].hireStatus == 0){ // 未支付
                  // data.push(JSON.parse(itemStr))
                  if(i){
                    data[i].payOff = '上期已还清'
                  }
                  data[i].nowStages = (i+1) + '/' + length
                  data[i].showStages = false
                  data[i].isShowOverdue = true;
                  break;
                } else if(msg[i].hireStatus == 1){ // 已还清
                  let num = ['一', '二', '三','四','五','六'][i]
                  // data.push(JSON.parse(itemStr))
                  data[i].payOff = '第'+ num + '期已还清'
                  data[i].showStages = true
                  data[i].isHire = true
                } else {  // 逾期
                  // data.push(JSON.parse(itemStr))
                  data[i].isShowOverdue = true;
                  data[i].isHireText = '分期款逾期'
                  data[i].nowStages = (i+1) + '/' + length
                  data[i].showStages = true
                  if(i){
                    data[i].payOff = '上期已还清'
                  }
                  break;
                }
              }
              // console.log(data)
              // resData.splice(j, 1, ...data)
              let dats=''
              data.forEach((item,index)=>{
                if(item.itemIndex==data.length)
                {
                  dats=data[index]
                }
              })
              courseArr.push(dats)
            // })
          }else{
             courseArr.push(resData[j].order)
          }
        }
        courseArr.sort((a, b) =>{
            return b.createdAt - a.createdAt
          })
        this.orders = courseArr
        console.log(this.orders)
        this.orderLoading = false
      })
      loading.close()
    },
    handleOrderscroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = 591
      if (scrollTop > offsetTop) {
        this.searchBarFixed = true
      } else {
        this.searchBarFixed = false
      }
    }
  },
  mounted() {
    // 调用获取订单数据
    this.getOrderData()
    // 监听订单滚动
    window.addEventListener('scroll', this.handleOrderscroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleOrderscroll)
  }
}

</script>

<style lang="stylus" scoped>
@import '~style/base.styl';

.orderHead {
  @extend .clear-fix;
  padding-bottom: 42px;

  p {
    float: left;
    width: 16%;
    text-align: center;
    font-size: 14px;
    color: $color-text-l;
  }
  p:first-child{
    width:32%
  }

  p+p {
    margin-left: 9px;
  }
}
.isFixed
{
    width: 100%;
    height: 48px;
    position: fixed;
    top: 64px;
    left: 0px;
    background: rgba(255,98,82,1);
    font-size:14px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    p{
      margin-top:21px;
      color:rgba(255,255,255,1);
    }
    .widthSet
    {
      width:90%;
      margin:0 auto;
      height:48px
    }
}
.padBottom
{
  padding-bottom:0 !important
}
.marginTop
{
  margin-top:-10px !important
}
.deteleText {
  text-align: center;
}
.orders-null {
  // padding: 15px 0;
  // margin-top: 30px;
  text-align: center;
  background:#fff;
  height 380px;
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.08);
  border-radius:4px;
  span {
    margin-top 122px;
    display: inline-block;
    vertical-align: middle;
  }
  img{
    width:92px;
    height:160px;
  }
  .orders-null-text{
    color: $color-person-text;
    padding-left: 30px;
  }
}
.dingdan {
  font-size: 20px;
  width: 30px;
  height:30px;
}
</style>
